<template>
	<view>
		<u-form-item :key="key" :label="label" :prop="prop" :required="required" :label-width="labelWidth || parentProps.labelWidth"
			:label-position="labelPosition" :label-style="labelStyle" :border-bottom="borderBottom">
			<template v-if="type == 'input'">
				<yer-input v-model="value" :disabled="disabled" :default-value="defaultValue" :placeholder="placeholder" :input-align="inputAlign" />
			</template>
			<template v-if="type == 'textview'">
				<yer-input v-model="value" :disabled="true" :default-value="defaultValue" :placeholder="placeholder" :input-align="inputAlign" />
			</template>
			<template v-else-if="type == 'number'">
				<yer-number v-model="value" :disabled="disabled" :default-value="defaultValue" :placeholder="placeholder" :list="list" :input-align="inputAlign" />
			</template>
			<template v-else-if="type == 'textarea'">
				<u-input v-model="value" :disabled="disabled" :border="true" :height="height" :placeholder="placeholder"
					type="textarea" :input-align="inputAlign" />
			</template>
			<template v-else-if="type == 'select'">
				<yer-select v-model="value" :default-value="defaultValue" :placeholder="placeholder" :list="list" :label-name="labelName" :value-name="valueName" :input-align="inputAlign" @change="change"/>
			</template>
			<template v-else-if="type == 'side-select'">
				<yer-side-select v-model="value" :default-value="defaultValue" :placeholder="placeholder" :list="list" :label-name="labelName" :value-name="valueName" :input-align="inputAlign" />
			</template>
			<template v-else-if="type == 'side-select-mutil'">
				<yer-side-select-mutil v-model="value" :default-value="defaultValue" :placeholder="placeholder" :list="list" :label-name="labelName" :value-name="valueName" :input-align="inputAlign" />
			</template>
			<template v-else-if="type == 'car-plate'">
				<yer-car-plate v-model="value" :disabled="disabled" :default-value="defaultValue" :placeholder="placeholder" :list="list" :input-align="inputAlign" />
			</template>
			<template v-else-if="type == 'idcard'">
				<yer-idcard v-model="value" :default-value="defaultValue" :placeholder="placeholder" :list="list" :input-align="inputAlign" />
			</template>
			<template v-else-if="type == 'mutil-select-single'">
				<u-input v-model="showValue" :placeholder="placeholder" type="select" @click="mutilShow = true" :label-name="labelName" :value-name="valueName"
					:select-open="mutilShow" :input-align="inputAlign" />
			</template>
			<template v-else-if="type == 'radio'">
				<yer-radio v-model="value" :default-value="defaultValue" :list="list" :label-name="labelName" :value-name="valueName"></yer-radio>
			</template>
			<template v-else-if="type == 'checkbox'">
				<yer-checkbox v-model="value" :default-value="defaultValue" :list="list" :label-name="labelName" :value-name="valueName"></yer-checkbox>
			</template>
			<template v-else-if="type == 'image-upload'">
				<yer-image-upload v-model="value" :default-value="defaultValue" :mode="mode" :maxCount="maxCount" :valueType="valueType" :uploadFormData="uploadFormData" :action="action" :header="header" :evalPath="evalPath" @change="change"></yer-image-upload>
			</template>
			<template v-else-if="type == 'date'">
				<yer-date v-model="value" :default-value="defaultValue"></yer-date>
			</template>
			<template v-else-if="type == 'date-hour'">
				<yer-date-hour v-model="value" :default-value="defaultValue"></yer-date-hour>
			</template>
			<template v-else-if="type == 'date-minute'">
				<yer-date-minute v-model="value" :default-value="defaultValue"></yer-date-minute>
			</template>
			<template v-else-if="type == 'date-second'">
				<yer-date-second v-model="value" :default-value="defaultValue"></yer-date-second>
			</template>
			<template v-else-if="type == 'time-minute'">
				<yer-time-minute v-model="value" :default-value="defaultValue"></yer-time-minute>
			</template>
			<template v-else-if="type == 'time-second'">
				<yer-time-second v-model="value" :default-value="defaultValue"></yer-time-second>
			</template>
			<template v-else-if="type == 'region'">
				<u-input v-model="showValue" :placeholder="placeholder" type="select" @click="show = true" :select-open="show"
					:input-align="inputAlign" />
			</template>
			<template v-slot:right>
				<slot></slot>
			</template>
		</u-form-item>
		<u-picker v-if="type == 'datetime'" v-model="show" mode="time" :params="params" @confirm="pickerConfirm">
		</u-picker>
		<u-picker v-else-if="type == 'region'" v-model="show" mode="region" :area-code="defaultVal"
			@confirm="regionConfirm"></u-picker>
		<u-select v-else-if="type == 'select'" v-model="show" :label-name="labelName" :value-name="valueName"
			:list="list" :default-value="defaultVal" @confirm="selectConfirm"></u-select>
		<u-select v-else-if="type == 'mutil-select'" mode="mutil-column-auto" v-model="mutilShow"
			:label-name="labelName" :value-name="valueName" :childName="childName" :list="list" :default-value="defaultVal"
			@confirm="selectMuiltConfirm"></u-select>
		<u-select v-else-if="type == 'mutil-select-single'" mode="mutil-column-auto" v-model="mutilShow"
			:label-name="labelName" :value-name="valueName" :childName="childName" :list="list" :default-value="defaultVal"
			@confirm="selectMuiltConfirm"></u-select>
		<!-- 展示的值 -->
		<view v-if="type == 'mutil-select' && mutilList.length > 0" class="border rounded">
			<view v-for="(item, index) in mutilList" :key="index" class="mx-3 my-1.5 flex justify-between text-gray-500">
				<view class="flex-1 whitespace-nowrap text-ellipsis overflow-hidden">{{
					item
				}}</view>
				<u-icon class="flex-shrink-0" name="close" size="26" @click="deleteItem(index)" />
			</view>
		</view>
	</view>
</template>

<script>
import YerInput from '../form/yer-input.vue'
import YerSelect from '../form/yer-select.vue'
import YerCheckbox from '../form/yer-checkbox.vue'
import YerRadio from '../form/yer-radio.vue'
import YerSideSelect from '../form/yer-side-select.vue'
import YerSideSelectMutil from '../form/yer-side-select-mutil.vue'
import YerIdcard from '../form/yer-idcard.vue'
import YerCarPlate from '../form/yer-car-plate.vue'
import YerNumber from '../form/yer-number.vue'
import YerDate from '../form/yer-date.vue'
import YerImageUpload from '../form/yer-image-upload.vue'
import YerDateHour from '../form/yer-date-hour.vue'
import YerDateMinute from '../form/yer-date-minute.vue'
import YerDateSecond from '../form/yer-date-second.vue'
import YerTimeMinute from '../form/yer-time-minute.vue'
import YerTimeSecond from '../form/yer-time-second.vue'
export default {
	name: "yer-form-item",
	components: {
		YerInput,
		YerSelect,
		YerCheckbox,
		YerRadio,
		YerDate,
		YerDateHour,
		YerDateMinute,
		YerDateSecond,
		YerTimeMinute,
		YerTimeSecond,
		YerSideSelect,
		YerSideSelectMutil,
		YerIdcard,
		YerCarPlate,
		YerNumber,
		YerImageUpload
	},
	props: {
		type: {
			type: String,
			default: "input",
		},
		disabled: Boolean,
		list: {
			type: Array,
			default: () => [],
		}, //字典的数组集合
		label: String, //左边label显示的内容
		labelStyle: {
			type: Object,
			default: () => {
				return {
					'font-weight': 'bold'
				}
			}
		}, //label的格式
		labelPosition: {
			type: String,
			default: "left",
		}, //label显示的位置 默认left  可选top
		prop: String, //表单验证用到的绑定属性
		defaultValue: "", //默认显示的字典，传字典的代码项
		defaultValueExtra: "", //默认显示的字典，传字典的代码项
		inputAlign: {
			type: String,
			default: "left",
		}, //input内容对齐方式三种：left  center  right  默认left
		labelWidth: {
			type: [String,Number],
			default: "auto",
		},
		placeholder: {
			type: String,
			default: "请选择",
		},
		height: String,
		deletable: {
			type: Boolean,
			default: true,
		}, //是否展示删除按钮
		required: {
			type: Boolean,
			default: false,
		}, //展示*号
		borderBottom: {
			type: Boolean,
			default: true,
		},
		maxCount: Number,
		labelName: {
			type: String,
			default: "label",
		},
		valueName: {
			type: String,
			default: "value",
		},
		childName: {
			type: String,
			default: "children",
		},
		action: {
			type: String,
			default: "",
		}, //请求地址
		header: {
			type: Object,
			default: ()=>{
				return {}
			},
		},
		uploadFormData: {
      type: Object,
      default: () => {
        return {}
      }
    },
		valueType: {
      type: String,
      default: 'string' // 值类型  array  string
    },
		mode: {
			type: String,
			default: "base64",
		}, //请求地址
		evalPath: {
			type: String,
			default: "data",
		},
		fileList: {
			type: Array,
			default: () => [],
		},
		showModel: {
			type: Number,
			default: 0,
		}, //日期显示格式 可选1对应yyyy-MM-dd HH:mm:ss和2对应yyyy-MM-dd HH:mm 3对应HH:mm 默认yyyy-MM-dd
	},
	// #ifndef VUE3
	emits: ["update:modelValue", "uploadSuccess", "valueChange", "change","input"],
	// #endif
	data() {
		return {
			key: "",
			defaultImageList: [],
			showValue: "",
			value: "", //字典展示的值，对应的是字典名称
			show: false, //控制select弹框的显示
			mutilShow: false,
			mutilList: [],
			mutilValue: [],
			defaultVal: [0], //默认值（是字典数组的下标）
			parentProps: [], // 父props的参数
			params: {
				year: true,
				month: true,
				day: true,
				hour: false,
				minute: false,
				second: false,
			},
		};
	},
	watch: {
		value:{
			immediate: true,
			handler:function (newVal, oldVal) {
				// console.log("value值改变",newVal);
				// #ifdef VUE3
				this.$emit("update:modelValue", newVal);
				// #endif
				// #ifndef VUE3
				this.$emit("input", newVal);
				// #endif
			}
		},
		defaultValue: {
			immediate: true,
			handler: function (newVal, oldVal) {
				// console.log('newVal',newVal);
				if (this.type == "select") {
					let val = this.defaultValue;
					if (!newVal) {
						val = oldVal;
					}
					for (let i = 0; i < this.list.length; i++) {
						if (this.list[i][this.valueName] == val) {
							this.showValue = this.list[i][this.labelName];
							this.defaultVal = [i];
							return;
						}
					}
				} else if (this.type == "datetime") {
					if (newVal) {
						this.value = newVal;
					}
				}  else if (this.type == "mutil-select-single") {
					let val = this.defaultValue;
					if (!newVal) {
						val = oldVal;
					}
					// 多层嵌套取下标
					for (let i = 0; i < this.list.length; i++) {
						const fa = this.list[i];
						for (let j = 0; j < fa[this.childName].length; j++) {
							const son = fa[this.childName][j];
							if (son[this.valueName] == val) {
								this.showValue = this.list[i][this.labelName] + "-" + son[this.labelName];
								this.defaultVal = [i, j];
								return;
							}
						}
					}
				} else {
					if (newVal == 0) {
						this.value = newVal + "";
					} else {
						this.value = newVal;
					}
				}
			},
		},
		list: {
			immediate: true,
			handler: function (newVal, oldVal) {
				let val = this.defaultValue;
				if (this.type == "select") {
					for (let i = 0; i < this.list.length; i++) {
						if (this.list[i][this.valueName] == val) {
							this.showValue = this.list[i][this.labelName];
							this.defaultVal = [i];
							return;
						}
					}
				} else if (this.type == "checkbox") {
					// console.log(newVal);
					// console.log(this.list);
					this.list.forEach((item) => {
						// 存在即选定
						if (!this.defaultValue) return;
						if (this.defaultValue.indexOf(item[this.valueName]) > -1) {
							item.checked = true;
						}
					});
				}
			},
		},
	},
	methods: {
		change(e) {
			this.$emit('change',e)
		},
		clear() {
			this.showValue = "";
			this.value = "";
		},
		pickerConfirm(e) {
			let res = "";
			let valueRes = "";
			if (this.showModel == 0 || this.showModel == 1 || this.showModel == 2) {
				res = e.year + "-" + e.month + "-" + e.day;
				valueRes = e.year + e.month + e.day;
			}
			// let showRes = e.year + '年' + parseInt(e.month) + '月' + parseInt(e.day) + '日';
			if (e.hasOwnProperty("hour")) {
				res += " " + e.hour + ":" + e.minute;
				valueRes += e.hour + e.minute;
				// showRes += parseInt(e.hour) + '时' + parseInt(e.minute) + '分';
			}
			if (e.hasOwnProperty("second")) {
				res += ":" + e.second;
				valueRes += e.second;
				// showRes += parseInt(e.second) + '秒';
			}
			this.value = res;
			// #ifdef VUE3
			this.$emit("update:modelValue", res);
			// #endif
			// #ifndef VUE3
			this.$emit("input", res);
			// #endif
		},
		regionConfirm(e) {
			this.showValue = `${e.province.label}-${e.city.label}-${e.area.label}`;
			// #ifdef VUE3
			this.$emit("update:modelValue", e.area.value);
			// #endif
			// #ifndef VUE3
			this.$emit("input", e.area.value);
			// #endif
			this.$emit("change", e);
		},
		selectConfirm(e) {
			// console.log("select设置值",e);
			this.showValue = e[0]["label"];
			// #ifdef VUE3
			this.$emit("update:modelValue", e[0]["value"]);
			// #endif
			// #ifndef VUE3
			this.$emit("input", e[0]["value"]);
			// #endif
			// 增加一个change事件
			this.$emit("change", e[0]);
			//选择后把默认值设为当前选择的
			for (let i = 0; i < this.list.length; i++) {
				if (this.list[i][this.valueName] == e[0]["value"]) {
					this.defaultVal = [i];
					return;
				}
			}
		},
		// 联动多选
		selectMuiltConfirm(e) {
			// console.log(e[0]);
			// console.log(e[1]);
			let labelStr = "";
			let valueStr = "";
			e.forEach((item) => {
				labelStr += item.label + "-";
				valueStr += item.value + "-";
			});
			labelStr = labelStr.substring(0, labelStr.length - 1);
			valueStr = valueStr.substring(0, valueStr.length - 1);
			// 级联单选的情况
			if (this.type == "mutil-select-single") {
				this.showValue = labelStr;
				this.mutilValue = valueStr;
			} else {
				if (this.mutilValue.indexOf(valueStr) < 0) {
					this.mutilList.push(labelStr);
					this.mutilValue.push(valueStr);
				}
			}

			this.$emit("valueChange", this.mutilValue);
		},
		// 删除子项
		deleteItem(index) {
			// 删除展示和value
			this.mutilList.splice(index, 1);
			this.mutilValue.splice(index, 1);
			this.$emit("valueChange", this.mutilValue);
		},
		radioGroupChange(e) {
			// console.log(e);
		},
		checkboxGroupChange(e) {
			// console.log(this.list);
			// console.log(e);
			const arr = [];
			let _this = this;
			this.$nextTick(() => {
				_this.list.forEach((item) => {
					if (item.checked == true) {
						arr.push(item[_this.valueName]);
					}
				});
				// #ifdef VUE3
				_this.$emit("update:modelValue", _this.translateArr(arr));
				// #endif
				// #ifndef VUE3
				_this.$emit("input", _this.translateArr(arr));
				// #endif
			});
		},
		onSuccess(data, index, lists, name) {
			let arr = [];
			for (let i = 0; i < lists.length; i++) {
				if (lists[i].progress == 100) {
					arr.push(lists[i].response.result);
				}
			}
			// #ifdef VUE3
			this.$emit("update:modelValue", this.translateArr(arr));
			// #endif
			// #ifndef VUE3
			this.$emit("input", this.translateArr(arr));
			// #endif
			this.$emit("uploadSuccess", arr[0]);
		},
		onRemove(index, lists, name) {
			let arr = [];
			for (let i = 0; i < lists.length; i++) {
				arr.push(lists[i].response.result);
			}
			// #ifdef VUE3
			this.$emit("update:modelValue", this.translateArr(arr));
			// #endif
			// #ifndef VUE3
			this.$emit("input", this.translateArr(arr));
			// #endif
		},
		onChange(index, lists, name) {
			// console.log(index, lists, name)
		},
		translateArr(arr) {
			let str = "";
			if (arr && arr.length > 0) {
				for (let i = 0; i < arr.length; i++) {
					str += arr[i] + ",";
				}
			}
			if (str.length > 0) {
				str = str.substring(0, str.length - 1);
			}

			return str;
		},
		initConfig() {
			this.parentProps = this.$parent.$parent.$parent.$props || {}
			// console.log('parentProps',this.parentProps)
		}
	},
	mounted() {
		this.initConfig()
		if (this.showModel == 1) {
			//yyyy-MM-dd HH:mm:ss
			this.params = {
				year: true,
				month: true,
				day: true,
				hour: true,
				minute: true,
				second: true,
			};
		} else if (this.showModel == 2) {
			//yyyy-MM-dd HH:mm
			this.params = {
				year: true,
				month: true,
				day: true,
				hour: true,
				minute: true,
				second: false,
			};
		} else if (this.showModel == 3) {
			//HH:mm
			this.params = {
				year: false,
				month: false,
				day: false,
				hour: true,
				minute: true,
				second: false,
			};
		}
	},
	
};
</script>

<style>

</style>
